pre {
    $code-highlight-green: #005c00;
    $code-highlight-green-soft: rgba(#006700, 0.5);
    $code-highlight-red: #62111A;
    $code-highlight-red-soft: rgba(#620A13, 0.5);
    $code-highlight-teal: #00FFFF;
    $code-highlight-teal-soft: rgba(#00ffff, 0.5);
    $code-highlight-blue: #0000FF;
    $code-highlight-blue-soft: rgba(#0000FF, 0.5);
    $code-highlight-yellow: #FFFF00;
    $code-highlight-yellow-soft: rgba(#FFFF00, 0.5);
    $code-highlight-orange: #FFA500;
    $code-highlight-orange-soft: rgba(#FFA500, 0.5);
    
    $code-text-light: $gray-100;
    $code-text-dark: $gray-900;
    $code-text-pink-100: #FF33FF;
    $code-text-pink-200: #D16FFF;
    $code-text-pink-300: #F5708B;
    $code-text-green-100: #00FF00;
    $code-text-green-200: #00FFFF;
    $code-text-green-300: #7FFFD4;
    $code-text-orange-100: #FF6929;
    $code-text-orange-200: #FF9900;
    $code-text-yellow-100: #FFFF00;
    $code-text-blue-100: #009EFA;
    $code-text-blue-200: #8CC6FF;
    $code-text-blue-300: #BAEAFF;

    position: relative;
    overflow-x: hidden;
    padding: 12px;
    border-radius: #{$border-radius};

    &:hover {
        .code-toolbar {
            background-color: $gray-600;
            color: #{$slate-tint-500};
        }

        .btn-copy {
            opacity: 1;
          }
    }

    code {
        overflow-x: auto;
        display: block;
        border: none;
    }

    .code-toolbar {
        display: flex;
        gap: 4px;
        position: absolute; 
        top: 4px;
        right: 4px;
        background: transparent;
        padding: 4px;
        color: #{$slate-shade-700};
    }

    @mixin code-line-highlight($color) {
        display: inline-block; 
        width: 100%;
        @if $color {
            background-color: $color !important;
        }
    }

    .code-line-highlight-green {
        @include code-line-highlight($code-highlight-green);
    }
    .code-line-highlight-green-soft {
        @include code-line-highlight($code-highlight-green-soft);
    }
    .code-line-highlight-red {
        @include code-line-highlight($code-highlight-red);
    }
    .code-line-highlight-red-soft {
        @include code-line-highlight($code-highlight-red-soft);
    }
    .code-line-highlight-teal {
        @include code-line-highlight($code-highlight-teal);
        color: #{$code-text-dark};
    }
    .code-line-highlight-teal-soft {
        @include code-line-highlight($code-highlight-teal-soft);
    }
    .code-line-highlight-blue {
        @include code-line-highlight($code-highlight-blue);
    }
    .code-line-highlight-blue-soft {
        @include code-line-highlight($code-highlight-blue-soft);
    }
    .code-line-highlight-yellow {
        @include code-line-highlight($code-highlight-yellow);
        .code-content {
            color: #{$code-text-dark};
        }
    }
    .code-line-highlight-yellow-soft {
        @include code-line-highlight($code-highlight-yellow-soft);
    }
    .code-line-highlight-orange {
        @include code-line-highlight($code-highlight-orange);
    }
    .code-line-highlight-orange-soft {
        @include code-line-highlight($code-highlight-orange-soft);
    }
    .code-line-highlight-none {
        @include code-line-highlight(null);
    }

    .code-line-numbers {
        @extend .noselect;
        color: rgba($slate-tint-800, 0.8);
    }

    .code-enumerate-divider {
        height: 100%; 
        padding: 4px 0px; 
        margin: 0px .75rem; 
        border-left: 1px solid #{$slate-tint-800};
    }

     white-space: pre-wrap;       /* css-3 */
     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
     white-space: -pre-wrap;      /* Opera 4-6 */
     white-space: -o-pre-wrap;    /* Opera 7 */
     word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

.docs {
    .results {
        overflow-x: auto;
        margin: 24px 24px;

        .code-toolbar {
            display: none;
        }

        pre {
            background-color: #{$gray-500};
            code {
                background-color: #{$gray-600};
            }
        }

        .title {
            background-color: #{$gray-700};
            border-start-start-radius: 8px;
            border-start-end-radius: 8px;
            padding: 8px 24px;
            background-color: #{$gray-700};
            color: #{$gray-100};
        }

        &.with-title {
            pre {
                padding: 12px 24px;
                border-start-start-radius: 0px;
                border-start-end-radius: 0px;
            }
        }
    }

    .code-block {
        overflow-x: auto;
        border: 2px solid $slate-tint-1000;
        border-radius: 8px;
        margin: 24px 0px;

        .title {
            background-color: #{$gray-700};
            border-start-start-radius: 8px;
            border-start-end-radius: 8px;
            padding: 8px 24px;
            color: #{$gray-100};
        }

        pre {
            margin: 0px;
        }

        &.with-title {
            .code-toolbar {
                top: -38px;
                background: transparent;
            }

            &:hover {
                .code-toolbar {
                    color: #{$slate-tint-500};                    
                }
            }

            pre {
                overflow: visible;
                padding: 12px 24px;
                border-start-start-radius: 0px;
                border-start-end-radius: 0px;
            }
        }
        
        .execution-time {
            display: flex; 
            align-items: center;
            gap: 6px;
            border-top: 2px solid $slate-tint-1000;
            background-color: #{$gray-600};
            padding: 12px;
            color: #{$gray-100};

            span.material-symbols-outlined {
                font-size: 1rem;
                color: #{$purple};
            }
        }
    }

    pre {
        background-color: #{$gray-600};
        border-radius: #{$border-radius};
        border: solid 2px white;

        code {
            border: none;
            white-space: inherit;
        }
    }

    code {
        @extend .rounded-1;

        color: #{$gray-100};
        background-color: #{$gray-600};
        border: 1px solid #{$slate-tint-1000};
        padding: 2px;
        white-space: nowrap;
    }
}
